    <canvas id="canvas" width='500' height="500" style="background:#000">
           <p>you browser not support canvas!<p>
       </canvas>
       <script>
       
            window.onload = ()=>{
            
            class Point{
            constructor({x=0, y=0, z=0, radius=10, ctx}){
                Object.assign(this, {x, y, z, ctx, radius})
            }
            draw(){
                ctx.save()
                ctx.beginPath()
                let scale = 600 / (600 - this.z)
                ctx.arc(currentX + this.x, currentY + this.y, this.radius * scale, 0, Math.PI * 2, false)
                
                ctx.fillStyle = `rgba(255,255,255,${(this.z+200)/(2*200) + 0.5})`
                ctx.fill()
                ctx.restore()
            }
            }
            class Ball{
                constructor(num, ctx, radius){
                    this.points = []
                    for(let i = 0; i < num; i++){
                        let k = -1 + ((i + 1) * 2) / num //sin 和 cos 区间 -1 -> 1
                        let a = Math.acos(k) //角度a 关于z的角度
                        let b = a * Math.sqrt(num * Math.PI)//角度b
                        let x = radius * Math.sin(a) * Math.cos(b)
                        let y = radius * Math.sin(a) * Math.sin(b)
                        let z = radius * Math.cos(a)
                        let p = new Point({x, y, z, ctx, radius: 2})
                        this.points.push(p)
                    }
                }
                draw(){
                    for(let i in this.points){
                        this.points[i].draw()
                    }
                }
            }
            let clearCanvas = function(obj){
                obj.clearRect(0, 0, obj.canvas.width, obj.canvas.height)
            }
            
            let canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                w = canvas.width = window.innerWidth,
                h = canvas.height = window.innerHeight,
                currentX = w / 2,
                currentY = h / 2,
                color1 = '#6ca0f6',
                color2 = '#367aec'
            let ball = new Ball(200, ctx, 400)
            ball.draw()
            function rotateX(){
                let cos = Math.cos(1 * Math.PI / 180)
                let sin = Math.sin(1 * Math.PI / 180)

                for(let i in ball.points){
                    let y = ball.points[i].y * cos - ball.points[i].z * sin
                    let z = ball.points[i].z * cos + ball.points[i].y * sin
                    ball.points[i].y = y
                    ball.points[i].z = z
                }
            }
            function rotateY(){
                let cos = Math.cos(1 * Math.PI / 180)
                let sin = Math.sin(1 * Math.PI / 180)

                for(let i in ball.points){
                    let x = ball.points[i].x * cos - ball.points[i].z * sin
                    let z = ball.points[i].z * cos + ball.points[i].x * sin
                    ball.points[i].x = x
                    ball.points[i].z = z
                }
            }
            function rotateZ(){
                let cos = Math.cos(1 * Math.PI / 180)
                let sin = Math.sin(1 * Math.PI / 180)

                for(let i in ball.points){
                    let x = ball.points[i].x * cos - ball.points[i].y * sin
                    let y = ball.points[i].y * cos + ball.points[i].x * sin
                    ball.points[i].x = x
                    ball.points[i].y = y
                }
            }
            ;(function a(){
                requestAnimationFrame(a)
                clearCanvas(ctx)
                ball.draw()
                rotateX()//围绕X轴转动
                // rotateY()//围绕X轴转动
                rotateZ()//围绕X轴转动
                
            })()
            }
        </script>
    